<template>
  <view class="add-goods-button" @click="onAddGoods">
    <text class="button-icon">+</text>
    <text class="button-text">添加商品</text>
  </view>

  <!-- 商品ID输入弹窗 -->
  <uni-popup ref="productIdPopup" type="center">
    <view class="product-id-popup">
      <view class="popup-header">
        <text class="popup-title">输入商品ID</text>
        <text class="popup-close" @click="closeProductIdPopup">×</text>
      </view>
      <view class="popup-content">
        <view class="input-group">
          <view class="input-scan-row">
            <input type="text" v-model="productId" class="product-id-input" placeholder="请输入商品ID（可选）"
              :focus="inputFocused" @focus="inputFocused = true" @blur="inputFocused = false" />
            <button class="btn-scan" @click="onScanCode">
              <text class="iconfont icon-saoma"></text>
            </button>
          </view>
          <text class="input-tip">商品ID只能包含英文、数字、下划线和-</text>
        </view>
        <view class="button-group">
          <button class="btn-skip" @click="skipProductId">跳过</button>
          <button class="btn-confirm" @click="confirmProductId">确定</button>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue'
import { IntranetConfig, UserConfig } from '@/static/js/config'
const productIdPopup = ref(null)
const productId = ref('')
const inputFocused = ref(false)

// 打开商品ID输入弹窗
function onAddGoods() {
  productIdPopup.value.open()
}

// 关闭商品ID输入弹窗
function closeProductIdPopup() {
  productIdPopup.value.close()
  setTimeout(() => {
    productId.value = ''
    inputFocused.value = false
  }, 100)
}

// 验证商品ID格式
function validateProductId(id) {
  return /^[a-zA-Z0-9_-]+$/.test(id)
}

// 跳过商品ID输入
function skipProductId() {
  closeProductIdPopup()
  navigateToAddPage('')
}

// 确认商品ID输入
function confirmProductId() {
  if (!productId.value) {
    uni.showToast({
      title: '请输入商品ID或点击跳过',
      icon: 'none'
    })
    return
  }

  if (!validateProductId(productId.value)) {
    uni.showToast({
      title: '商品ID只能包含英文、数字、下划线和-',
      icon: 'none'
    })
    return
  }

  const currentProductId = productId.value
  console.log('Current Product ID:', currentProductId)
  // 发请求查看有没有这个商品ID
  uni.request({
    url: IntranetConfig.domain + `api/product/get_product_v2/`,
    method: 'GET',
    data: {
      product_id: currentProductId
    },
    success: (res) => {
      if (res.data.code === 200) {
        console.log('调到编辑界面')
        uni.navigateTo({
          url: '/pages/goods_edit/goods_edit?id=' + res.data.data.id
      })
      } else {
        navigateToAddPage(currentProductId)
      }
    },
    fail: (err) => {
      console.error('Request Failed:', err)
    },
    complete: () => {
      closeProductIdPopup() // 

    }
  })
  // navigateToAddPage(currentProductId)
}

// 跳转到添加商品页面
function navigateToAddPage(id) {
  const encodedProductId = encodeURIComponent(id)
  const url = `/pages/goods_add/goods_add?product_id=${encodedProductId}`
  console.log('Navigating to:', url)
  uni.navigateTo({
    url,
    success: () => {
      console.log('Navigation successful')
    },
    fail: (err) => {
      console.error('Navigation failed:', err)
    }
  })
}

// 扫码功能
function onScanCode() {
  uni.scanCode({
    scanType: ['barCode', 'qrCode'],
    success: (res) => {
      if (res.result) {
        productId.value = res.result
      } else if (res.code) {
        productId.value = res.code
      }
    },
    fail: (err) => {
      uni.showToast({ title: '扫码失败', icon: 'none' })
    }
  })
}
</script>

<style scoped lang="scss">
.add-goods-button {
  position: fixed;
  right: 32rpx;
  bottom: 140rpx;
  width: 96rpx;
  height: 96rpx;
  background: linear-gradient(135deg, #ffb86c 0%, #ff7e2d 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 18rpx rgba(255, 126, 45, 0.18);
  z-index: 100;
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;

  .button-icon {
    color: #fff;
    font-size: 40rpx;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 2rpx;
    text-shadow: 0 2rpx 8rpx rgba(255, 126, 45, 0.10);
    transition: color 0.2s;
  }

  .button-text {
    color: #fff;
    font-size: 18rpx;
    letter-spacing: 1rpx;
    font-weight: 500;
    text-shadow: 0 2rpx 8rpx rgba(255, 126, 45, 0.10);
  }

  &:active {
    transform: scale(0.96);
    box-shadow: 0 2rpx 8rpx rgba(255, 126, 45, 0.10);
    background: linear-gradient(135deg, #ff7e2d 0%, #ffb86c 100%);
  }
}

.product-id-popup {
  width: 620rpx;
  background: #fff;
  border-radius: 32rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.10);
  margin: 0 auto;
  animation: popup-fade-in 0.25s;

  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 36rpx 36rpx 0 36rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background: #fff;

    .popup-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #222;
    }

    .popup-close {
      font-size: 44rpx;
      color: #bbb;
      padding: 0 18rpx;
      border-radius: 50%;
      transition: background 0.2s;

      &:active {
        background: #f5f5f5;
      }
    }
  }

  .popup-content {
    padding: 36rpx;

    .input-group {
      margin-bottom: 36rpx;

      .input-scan-row {
        display: flex;
        align-items: center;
        gap: 18rpx;
        margin-bottom: 12rpx;

        .product-id-input {
          flex: 3;
          width: 0;
          height: 90rpx;
          border: 2rpx solid #e5e5e5;
          border-radius: 16rpx;
          padding: 0 28rpx;
          font-size: 32rpx;
          background: #fafbfc;
          transition: border-color 0.2s, box-shadow 0.2s;
          outline: none;

          &::placeholder {
            color: #bbb;
          }
        }

        .product-id-input:focus,
        .product-id-input[focus] {
          border-color: #ff7e2d;
          box-shadow: 0 2rpx 8rpx rgba(255, 126, 45, 0.10);
          background: #fff;
        }

        .btn-scan {
          flex: 2.5;
          min-width: 60rpx;
          max-width: 80rpx;
          height: 60rpx;
          background: linear-gradient(90deg, #ffb86c 0%, #ff7e2d 100%);
          color: #fff;
          border: none;
          border-radius: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 2rpx 8rpx rgba(255, 126, 45, 0.10);
          transition: background 0.2s;
          padding: 0;

          .scan-icon {
            font-size: 32rpx;
            margin: 0;
          }

          &:active {
            background: linear-gradient(90deg, #ff7e2d 0%, #ffb86c 100%);
          }
        }
      }

      .input-tip {
        font-size: 24rpx;
        color: #999;
        margin-top: 8rpx;
        display: block;
        line-height: 1.5;
      }
    }

    .button-group {
      display: flex;
      justify-content: space-between;
      gap: 32rpx;

      button {
        flex: 1;
        height: 88rpx;
        border-radius: 16rpx;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        box-shadow: 0 2rpx 8rpx rgba(255, 126, 45, 0.08);
        border: none;
        transition: background 0.2s, color 0.2s;

        &.btn-skip {
          background: #f5f5f5;
          color: #888;
        }

        &.btn-confirm {
          background: linear-gradient(90deg, #ffb86c 0%, #ff7e2d 100%);
          color: #fff;
        }

        &:active {
          opacity: 0.85;
        }
      }
    }
  }
}

@keyframes popup-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>